<template>
  <div class="tab_box">
    <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab" @tab-click="clickTab" closable>
      <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
      </el-tab-pane>
    </el-tabs>
      <Close @click="CloseTab" size="large"  style="width: 1.2em; height:1.2em; margin-right: 8px"/>
  </div>
  
</template>

<script>
import { ref, reactive, onMounted, watch, toRefs, computed,provide } from 'vue'// ref 为我们的值创建了一个响应式引用
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import {
  Close,
  ArrowLeft,
  ArrowRight
} from '@element-plus/icons-vue'
export default {
  components: {
    Close,
    ArrowLeft,
    ArrowRight
  },
  name: "Tabs",
  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const state = reactive({
      isHiddenFirst: null,//  侧边菜单的显示隐藏，页面初始配置
      isCollapseFirst: null,// 侧边菜单的显示折叠，页面初始配置
      isHidden: computed(() => store.state.SideMenuIsHidden),// 侧边菜单的显示隐藏
      isCollapse: computed(() => store.state.SideMenuIsCollapse),// 侧边菜单的显示折叠
    });
    const sideMenuControl = (hidden, collapse) => {
      state.isHiddenFirst = hidden;
      state.isCollapseFirst = collapse;
    }
    provide("sideMenuControl", sideMenuControl);

    const handleFoldClick = (isCollapse, isHidden) => {
      if (state.isHiddenFirst) {
        // 隐藏：也折叠
        store.commit('updateSideMenuIsHidden', !isHidden)
        store.commit('updateSideMenuIsCollapse', !isCollapse)
      } else {
        // 不隐藏：折叠或不折叠
        store.commit('updateSideMenuIsHidden', state.isHiddenFirst)
        store.commit('updateSideMenuIsCollapse', !isCollapse)
      }
    }
    // 如果要computed 可以修改值，则需要传入一个拥有 get 和 set 函数的对象，创建一个可手动修改的计算状态。
    const editableTabs = computed({
      set: (val) => {
        store.state.editableTabs = val;
      },
      get: () =>
        store.state.editableTabs

    })
    const editableTabsValue = computed({
      set: (val) => {
        store.state.editableTabsValue = val;
      },
      get: () =>
        store.state.editableTabsValue

    })
    const removeTab = (targetName) => {
      let tabs = editableTabs.value;
      let activeName = editableTabsValue.value;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      editableTabsValue.value = activeName;
      editableTabs.value = tabs.filter(tab => tab.name !== targetName);
      if (tabs.length == 1) {
        store.commit("initTab")
        router.push({ name: 'processinstance' })
      } else {
        router.push({ name: activeName })
      }

    }
    const clickTab = (target) => {
      router.push(target.props.name)
    }
    const CloseTab = () => {
      store.commit("initTab")
      router.push({ name: 'processinstance' })
    }
    watch(
      () => route.path,
      (newVal, oldVal) => {
        // debugger
        store.state.editableTabsValue = newVal.split('/')[1]
      },)
    return {
      // editableTabs: computed(() => store.state.editableTabs),// 返回一个默认不可手动修改的 ref 对象
      // editableTabsValue: computed(() => store.state.editableTabsValue),
      ...toRefs(state),
      editableTabs,
      editableTabsValue,
      removeTab,
      clickTab,
      route,
      handleFoldClick,
      CloseTab
    }
  }
}
</script>

<style lang="scss" scoped>
.tab_box {
  @include layout(normal,center);
  width: 100%;
  background-color: #fff;

}
.toggle {
  background-color: #ffffff;
  border-radius: 0 50px 50px 0;
  @include wh-size(32px, 32px);
  @include layout(center,center);
}
.el-tabs {
background-color: #fff;
width: calc(100vw - 276px);
}
:deep(.el-tabs__item) {
  font-family: Alibaba PuHuiTi;
  font-weight: 500;
  font-size: px2vw(14px);

  &.is-active {
    border-bottom: 5px solid #4662D7 !important;
    color: #2F54EB;
  }
}

:deep(.el-tabs__header) {
  margin: 0 !important;
}

.is-active {
  color:  #2F54EB;
}
</style>